<template>
  <div class="p20 radius5" style="background:#fff;">
    <el-row :gutter="20">
      <el-col :span="6" class="menu_node-own">
        <div class=" p15" style="background:#E4E7ED">导航目录</div>
        <el-input placeholder="请输入导航名称" prefix-icon="el-icon-search" size="small" v-model="filterText" class="input-with-select mt10">
        </el-input>
        <el-tree :data="dataList" ref="tree" :filter-node-method="filterNode" :accordion="true" class="mt10" :highlight-current="true" @node-click="clickItemTree" :props="defaultProps" node-key="id" :render-content="renderContent">
        </el-tree>

      </el-col>
      <el-col :span="18" class="menu-right">
        <div class=" p15" style="background:#E4E7ED">导航操作</div>
        <el-form ref="formMenu" :rules="rules" :model="formMenu" label-width="100px" size="mini" class="mt20">
          <el-form-item label="上级导航" style="width:400px;">
            <el-input :disabled="disabled" v-model="formMenu.parentName" placeholder="请输入导航名称"></el-input>
          </el-form-item>
          <el-form-item label="导航名称" style="width:400px;" prop="menuName">
            <el-input v-model="formMenu.menuName" placeholder="请输入导航名称"></el-input>
          </el-form-item>
          <el-form-item label="导航ICON" style="width:400px;" v-if="formMenu.isParent">
            <el-input v-model="formMenu.menuIcon" placeholder="请输入导航ICON,字体图标"></el-input>
          </el-form-item>
          <el-form-item label="导航路径" style="width:400px;" prop="menuRouter">
            <el-input v-model="formMenu.menuRouter" placeholder="请输入导航路径"></el-input>
          </el-form-item>
           <el-form-item label="导航Code" style="width:400px;">
            <el-input v-model="formMenu.menuCode"  placeholder="请输入导航路径"></el-input>
          </el-form-item>
          <el-form-item label="" style="width:400px;">
            <el-button type="primary" @click="addAndEditMenu('formMenu')">确定</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import server from "@/service/index_c";
export default {
  data() {
    return {
      dataList: [],
      filterText: "",
      isChoose: false,
      disabled: false,
      formMenu: {
        isEdit: false,
        menuMid: "",
        parentName: "",
        parentId: "",
        menuName: "",
        menuIcon: "",
        menuRouter: "",
        menuCode:''
      },
      rules: {
        menuName: [
          { required: true, message: "请输入导航名称", trigger: "blur" }
        ],
        menuCode: [
          { required: true, message: "请输入导航Code", trigger: "blur" },
          {
            pattern: /^\d/,
            message: "请输入数字",
            trigger: "blur"
          }
        ],
        menuRouter: [
          { required: true, message: "请输入导航路径", trigger: "blur" },
          {
            pattern: /^(?!_)(?!.*?_$)[a-z_]+$/,
            message: "请以小写字母做为导航路径",
            trigger: "blur"
          }
        ]
      },
      defaultProps: {
         children: "childList",
        label: "name"
      },
      chooseMenuNode: {}
    };
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
  this.queryRolesMenuList();
  },
  methods: {
    //获取全部菜单
    async queryRolesMenuList() {
      let res = await server.haibeiQueryAllMenuList();
      if (res.success) {
        this.dataList = res.result.data;
      }
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //添加和编辑操作

    //点击menu node
    clickItemTree(a, b, c) {
      console.log(a);
      this.chooseMenuNode = a;
       this.disabled=true;
      this.formMenu = {
        isEdit: true,
        isParent: a.isparent,
        menuName: a.name,
        menuRouter: a.router,
        menuIcon: a.icon,
        parentId: a.parent_id,
        menuMid: a.id,
        menuCode:a.code
      };
    },
    // 添加
    append(data, e) {
      e.stopPropagation();
      console.log(data,'---');
      this.chooseMenuNode = data;
      this.disabled=false;
      this.formMenu = {
        isEdit: false,
        menuMid: "",
        parentName: '',
        parentId: data.id,
        menuName: "",
        menuIcon: data.icon,
        menuRouter: "",
        menuCode: ""
      };
    },
    //删除
    remove(node, data, e) {
      e.stopPropagation();
      const parent = node.parent;
      const children = parent.data.childList || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      this.$confirm("您是否删除该菜单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      })
        .then(() => {
          this.removeMenuItemNode(data, res => {
            children.splice(index, 1);
            this.formMenu = {
              isEdit: false,
              menuMid: "",
              parentName: "",
              parentId: "",
              menuName: "",
              menuIcon: "",
              menuRouter: ""
            };
          });
        })
        .catch(() => {});
    },
    //渲染
    renderContent(h, { node, data, store }) {
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
          <span>
            <el-button
              style="font-size: 12px;"
              size="mini"
              type="text"
              on-click={e => this.append(data, e)}
            >
              添加
            </el-button>
            <el-button
              style="font-size: 12px;"
              size="mini"
              type="text"
              on-click={e => this.remove(node, data, e)}
            >
              删除
            </el-button>
          </span>
        </span>
      );
    },
    //添加导航
    addAndEditMenu(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            name: this.formMenu.menuName,
            icon: this.formMenu.menuIcon,
            code:this.formMenu.menuCode,
            router: this.formMenu.menuRouter,
          };

          if (this.formMenu.isEdit) {
            params.id = this.formMenu.menuMid;
            params.parent_id = this.formMenu.parentId;
            this.editMenuItenNode(params);
          } else {
            params.parent_id = this.formMenu.parentId|| '0';
            this.addMenuItenNode(params);
          }
        }
      });
    },
    //添加导航
    async addMenuItenNode(params) {
      let res = await server.haiheiServerAddMenuNode(params);
      console.log(this.chooseMenuNode)
      if (res.success) {
      this.queryRolesMenuList();
        this.formMenu = {
          menuMid: "",
          parentName: "",
          parentId: "",
          menuName: "",
          menuIcon: "",
          menuRouter: ""
        };
        this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    //编辑导航
    async editMenuItenNode(params) {
      console.log(params);
      let res = await server.haiheiServerEditMenuNode(params);
      if (res.success) {
        this.chooseMenuNode.text = res.result.text;
        this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },

    //删除导航
    removeMenuItemNode(item, bc) {
      server
        .haiheiServerDeleteMenuNode({
          id: item.id,
         
        })
        .then(res => {
          if (res.success) {
            bc(res);
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
        });
    }
  }
};
</script>

<style scoped>
.menu-right {
  background: #f7f7f7;
}
.el-col {
  min-height: 400px;
}
</style>